<template>
  <div class="real-page">
    <div class="title">实时成交</div>
    <div class="type-header">
      <div class="real-col price">价格 (USDT)</div>
      <div class="real-col count">数量 (BTC)</div>
      <div class="real-col time">时间</div>
    </div>
    <GeminiScrollbar class="table-body" >
        <RealList v-for="(item,index) in dataList" :key="index" :item="item"></RealList>
    </GeminiScrollbar>
  </div>
</template>

<script>
import RealList from "./list-real";
export default {
  data() {
    return {
      dataList: [
        {
          Price: 10.3456,
          Count: 36.0000,
          Time: "12:36:00",
          PairName: "BTC/USDT",
          Type:1,//1 买 2，卖
        },
        {
          Price: 10.3456,
          Count: 36,
          Time: "12:36:00",
          PairName: "BTC/USDT",
          Type:2,
        },
        {
          Price: 10.3456,
          Count: 36,
          Time: "12:36:00",
          PairName: "BTC/USDT",
          Type:1,
        },
        {
          Price: 10.3456,
          Count: 36,
          Time: "12:36:00",
          PairName: "BTC/USDT",
          Type:2,
        }
      ]
    };
  },
  components: {
    RealList
  }
};
</script>

<style lang="less" scoped>
.b {
  outline: solid 1px red;
}
.real-page {
  width: 100%;
  height: 100%;
  font-size: 12px;
  background-color: #05193d;
  .title {
    line-height: 28px;
    color: hsla(0, 0%, 100%, 0.6);
    padding: 0 5px;
  }
  .type-header {
    border-top: solid 1px hsla(0, 8%, 41%, 0.8);
    border-bottom: solid 1px hsla(0, 8%, 41%, 0.8);
    line-height: 30px;
    display: flex;
    padding: 0 5px;
  }
  .table-body {
    //   width:100%;
    width: 290px;
    height: 460px;
    overflow-y: scroll;
  }
  .real-col {
    color: rgb(255, 255, 255);
  }
  .price,
  .table-body /deep/ .price,
  .count,
  .table-body /deep/ .count,
  .time,
  .table-body /deep/ .time {
    flex: 1;
  }
  .count,
  .table-body /deep/ .count,
  .time,
  .table-body /deep/ .time {
    text-align: right;
  }
}
</style>